<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">Less编译</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left">
            <a class="btn btn-theme mr-md" @click="format">编译</a>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="json" :operation="{inputData: outputData}"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import lesser from '@/components/less/3.8.1/less.min.js'
import Pipe from '../index/pipe.vue'
console.log(lesser)
/* Less编译 */
export default {
  components: {
    SwitchRich,
    Pipe
  },
  data () {
    return {
      inputData: 'div {\n\n}',
      outputData: 'div {\n\n}',
      isPipe: false
    }
  },

  methods: {
    /**
     * @function 格式化(竖向排列)
    */
    format () {
      lesser.render(this.inputData).then((output) => {
        this.outputData = output.css
        // 是否管道操作
        if (this.isPipe === true) {
          this.inputData = this.outputData
        }
      })
    }
  }
}
</script>

<style lang="less">
.json-input{
  height: 450px;
}
</style>
